<!-- 订单管理 -->
<template>
	<view class="">
		<view class="top-box">
			<u-navbar :is-back="true">
				<view class="flex-bettwen w100">
					<view class="fs34">订单管理</view>
					<view class="color-gray fs28 m-r30" @click="isShowSortTime = true">
						<text class="fs26 m-r10">筛选</text>
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
			</u-navbar>
			<view class="bg-white padding20">
				<u-search placeholder="搜索近3个月订单" v-model="keyword"></u-search>
			</view>

			<view class="bg-white flex-bettwen padding-lr30">
				<view class="tab-item p-b20 center color-gray " @click="changeTab(index)"
					:class="current == index?'tab-item-active':''" v-for="(item,index) in tabList" :key="index">
					<view class="fs28">{{item.text}}</view>
				</view>
			</view>
		</view>



		<view class="padding30 contont-box">
			<view class="m-b20 hidden br12 bg-white padding20" v-for="(item,index) in list" :key="index"
				@click="goDetail(item)">
				<view class="flex-bettwen fs26">
					<text>下单时间：{{item.createTime}}</text>
					<text class="price-color">{{statusObj[item.orderStatus]}}</text>
				</view>
				<view class="flex m-t20" v-if="item.productVoList.length==0">
					<view class="m-r20 w-130" v-if="item.quote">
						<image :src="item.quote.picture" class="w-130 h-130  br16" mode=""></image>
						<!-- <u-lazy-load :image="item.quote.picture" :index="index"
							class="w-130 h-130  br16"></u-lazy-load> -->
					</view>
					<view class="flex flex1" v-if="item.quote">
						<view class="flex1 flex-column-between" style="">
							<view class="text-overflow3 fs26">{{item.quote.details}}</view>
							<view class="">
								<u-tag text="接受定做" mode="light" type="success" class="m-r10" size="mini" />
								<u-tag text="48小时发货" mode="light" type="info" class="m-r10" size="mini" />
								<u-tag text="货到付款" mode="light" type="info" size="mini" />
							</view>
						</view>
						<u-icon name="arrow-right" class=" color-gray"></u-icon>
					</view>
				</view>

				<view class="m-t20" v-if="item.productVoList !== 0">
					<view class="m-t20" v-for="(v,i) in item.productVoList" :key="i">
						<view class="flex">
							<view class="m-r20 w-130">
								<image :src="v.cover" class="w-130 h-130  br16" mode=""></image>
							</view>
							<view class="flex flex1 w100">
								<view class="flex1 flex-column-between" style="">
									<view class="text-overflow3 fs26">{{v.productName}}</view>
									<view class="">
										<!-- <u-tag text="接受定做" mode="light" type="success" class="m-r10" size="mini" /> -->
										<u-tag text="48小时发货" mode="light" type="info" class="m-r10" size="mini" />
										<u-tag text="货到付款" mode="light" type="info" size="mini" />
									</view>
								</view>
								<u-icon name="arrow-right" class=" color-gray"></u-icon>
							</view>
						</view>
						<view class="m-t20 fs26" v-for="(vv,ii) in v.goodsList" :key="ii">
							<view class="">
								<text class="color-gray ">类型：</text>
								<text>{{vv.key}}</text>
							</view>

							<view class="order-item-content" v-for="(key, id) in vv.value" :key="id">
								<view class="padding10 flex-bettwen">
									<view class="flex-center">
										<image class="m-r20 w-50 h-50 br16" :src="key.color.icon | concatRequestUrl">
										</image>
										<text class="order-item-num">色号：{{key.color.name}}</text>
									</view>
									<view class="">
										<text class="price-color fs26">￥{{key.salePrice}}</text>
										<text class="fs26">x{{key.number}}/米</text>
									</view>

								</view>
							</view>
						</view>
					</view>

					<!-- <view class="bg-gray m-t10 flex-bettwen br12 color-item" v-for="(element, prop) in v.goodsList" :key="pro">
						<view class="flex-center">
							<view class=" br16 m-r20">
								<image src="/static/images/colorboard.png" mode="" class="w-40 h-40 padding10 bg-white"></image>
							</view>
							<text>2##</text>
						</view>
						<view class="">
							<text class="">￥34.00</text>
							<text class="color-gray">×1.0米</text>
						</view>
					</view> -->


				</view>




				<view class="m-t20 fs26">
					<text class="color-gray">客户留言：</text>
					<text>{{item.remark || ''}}</text>
				</view>
				<view class="line-x margin-tb20"></view>
				<view class="flex-end">
					<view class="" v-if="item.productType == 4">
						共<text class="price-color">{{item.quote.number || 1}}</text>件，<text class="price-color"
							v-if="item.orderStatus == 0">{{statusObj[item.orderStatus]}}</text><text
							class="price-color fs34 " style="font-weight: 500;">￥{{item.totalAmount}}</text>
					</view>
					<view class="" v-if="item.productType !== 4">
						<text class="price-color fs34 " style="font-weight: 500;">￥{{item.totalAmount}}</text>
					</view>
				</view>

				<view class="flex-bettwen m-t20">
					<text class="fs24 color-gray">更多</text>
					<view class="" v-if="item.orderStatus == 0">
						<u-button size="mini" class="m-r20" type="primary"
							@click="callPhone(item.subscriberAddress.tel)">联系买家</u-button>
						<u-button size="mini" class="m-r20" @click="updatePrice(item)">修改价格</u-button>
						<u-button size="mini" @click="showToast">备注</u-button>
					</view>
					<view class="" v-if="item.orderStatus == 1">
						<u-button size="mini" class="m-r20" type="primary"
							@click="callPhone(item.subscriberAddress.tel)">联系买家</u-button>
						<u-button size="mini" class="" @click="goSend(item)">发货</u-button>
					</view>
					<view class="" v-if="item.orderStatus == 2">
						<u-button size="mini" class="m-r20" type="primary"
							@click="callPhone(item.subscriberAddress.tel)">联系买家</u-button>
						<u-button size="mini" class="m-r20" @click="showToast">查看物流</u-button>
						<u-button size="mini" class="" @click="showToast">提醒收货</u-button>
					</view>
					<view class="" v-if="item.orderStatus == 3">
						<u-button size="mini" class="m-r20" type="primary"
							@click="callPhone(item.subscriberAddress.tel)">联系买家</u-button>
						<u-button size="mini" class="m-r20" @click="showToast">查看物流</u-button>
						<u-button size="mini" class="" @click="showToast">提醒评价</u-button>
					</view>
				</view>
				<view class="line-x margin-tb20 fs26"></view>
				<view class="">
					<text class="color-gray">备注：</text>
					<text>商家自己备注</text>
				</view>
			</view>


			<view class="" style="line-height: 400rpx;">
				<u-empty text="数据为空" mode="list" v-if="list.length == 0"></u-empty>
			</view>
		</view>

		<!-- 时间筛选 -->
		<u-popup v-model="isShowSortTime" mode="bottom">
			<view class="padding30">
				<view class="center fs30 padding-tb20" @click="selectSortTime(item,index)"
					:class="currentSortTime == index?'color-blue':''" v-for="(item,index) in sortTime" :key="index">
					{{item}}
				</view>
			</view>
		</u-popup>

		<!-- 修改价格弹窗 -->
		<u-popup v-model="editPriceWin" mode="bottom">
			<view class="center fw500 fs34 padding30">修改价钱</view>
			<view class="padding30 flex-bettwen">
				<view class="">
					<input type="text" v-model="totalAmount" placeholder="请输入修改价钱" />
					<view class="line-x"></view>
				</view>

				<u-button type="primary" @click="changPrice" size="medium">修改</u-button>
			</view>

			<view class="h-100"></view>
		</u-popup>

		<!-- 选择快递弹窗 -->
		<u-popup v-model="cofirmModal" mode="bottom" border-radius="16" closeable>
			<view class="">
				<scroll-view scroll-y="true" class="" style="height: 700rpx;">
					<view class="margin20 padding20 flex-bettwen" @click="selectlogistics(item)"
						v-for="(item,index) in logisticsList" :key="index">
						<view class="">
							<view class="">
								<text class="fw500">{{item.name}}</text>
								<text class="m-l20 fs26 color-gray">{{item.tel}}</text>
							</view>
							<view class="fs26 color-gray m-t20">
								往返{{item.destination}}
							</view>
						</view>

						<view class="">
							<u-icon :name="quoteDTO.logisticsId==item.id?'checkmark-circle-fill':'checkmark-circle'"
								:color="quoteDTO.logisticsId==item.id?'#EB692D':''"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 日历弹窗 -->
		<u-calendar v-model="showCalendar" mode="range"></u-calendar>

		<!-- 关闭提示 -->
		<u-modal v-model="showSureClose" @cancel="cancelEvent" @confirm="confirmEvent" :content="content"
			mask-close-able show-cancel-button cancel-text='取消' confirm-text="确认"></u-modal>

	</view>
</template>

<script>
	import {
		orderList,
		updateOrderStatus
	} from '@/api/order/index'
	export default {
		data() {
			return {

				keyword: '',
				current: 0,
				tabList: [{
					text: '全部',
					value: 34,
				}, {
					text: '待支付',
					value: 2,
				}, {
					text: '待发货',
					value: 0,
				}, {
					text: '待收货',
					value: 0,
				}, {
					text: '待评论',
					value: 0,
				}, {
					text: '退换/售后',
					value: 0,
				}, {
					text: '已完成',
					value: 0,
				}],

				statusObj: {
					0: '待买家支付',
					1: '待发货',
					2: '待收货',
					3: '待评价',
					4: '已关闭',
					5: '已完成'
				},
				list: [],
				isShowSortTime: false, // 是否显示时间弹窗
				showCalendar: false, // 是否显示日历
				currentSortTime: 0,
				sortTime: [
					'今日',
					'昨日',
					'近7日',
					'近30天',
					'自然日',
					'自然周',
					'自然月',
					'自定义',
				],
				params: {
					page: 1,
					size: 20,
					status: '',
				},
				updateParams: {
					orderId: '',
					totalAmount: '',
					orderStatus: '',
					orderStatus: '',
					actuallyAmount: '',
					address: '',
					subscriberAddress: '',
					appraise: '',
				},
				totalAmount: '', // 修改价钱
				editPriceWin: false, // 修改价格弹窗
				cofirmModal: false, // 选择快递弹窗
				logisticsId: '', // 
				logisticsList: [],
				showSureClose: false, // 是否确认修改价格
				content: '是否确认修改价格',
				eventType: '', // 事件类型
				currentOrderId: '',
			}
		},
		async onLoad(options) {
			if (options.current) {
				this.current = options.current
			}
			this.params.shopId = uni.getStorageSync('shopInfo').shopId
			if (!this.params.shopId) {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				this.getOrderList()
			}
		},
		methods: {
			// 跳转详情
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/order/order-detail?orderId=${item.orderId}`
				})
			},
			// 取消事件
			cancelEvent() {
				this.totalAmount = ''
				this.editPriceWin = false
			},
			// 确认事件
			async confirmEvent() {
				// 发请求
				uni.showLoading({
					title: '加载中...'
				})
				if (this.eventType == 'changePrice') {
					let res = await updateOrderStatus({
						orderId: this.currentOrderId,
						totalAmount: this.totalAmount,

					})
					uni.hideLoading()
					await uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 2000
					})
					setTimeout(() => {
						this.totalAmount = ''
						this.editPriceWin = false
					}, 1000)
					console.log('修改价钱', this.totalAmount);

				}
				this.list = []
				this.getOrderList()

			},
			// 修改价格
			updatePrice(item) {
				this.eventType = 'changePrice'
				this.totalAmount = item.totalAmount

				this.currentOrderId = item.orderId
				this.editPriceWin = true
			},
			// 去发货
			async goSend(item) {
				uni.showLoading({
					title: '加载中...'
				})
				let res = await updateOrderStatus({
					orderId: item.orderId,
					orderStatus: 2
				})
				uni.hideLoading()
				uni.showToast({
					title: '发货成功',
					duration: 2000
				})

				this.list = []
				this.getOrderList()

			},

			showToast() {
				uni.showToast({
					title: "暂未开发",
					icon: 'none'
				})
			},
			// 更新订单状态
			async updateOrderStatusEvent(status) {
				// status 0 - 待付款 1 - 待发货 2 - 待收货 3 - 待评价 4 - 已完成

				let res = await updateOrderStatus({

				})
			},
			// 修改价钱
			changPrice() {
				if (!this.totalAmount) {
					return uni.showToast({
						title: '请输入修改的价钱',
						icon: 'none'
					})
				}
				this.showSureClose = true
				this.editPriceWin = false
			},

			changeTab(index) {
				this.current = index

				if (index == 0) {
					this.params.status = ''
				} else if (index == 1) {
					this.params.status = 0 // 待支付
				} else if (index == 2) {
					this.params.status = 1 // 待发货
				} else if (index == 3) {
					this.params.status = 2 // 待收货
				} else if (index == 4) {
					this.params.status = 3 // 待发货
				}
				this.list = []
				this.getOrderList()
			},
			// 取用户信息
			getUserInfo() {
				this.$store.dispatch('updateUserInfo')
			},
			// 取订单列表
			async getOrderList() {
				uni.showLoading()

				let res = await orderList(this.params)

				res.data.forEach((item) => {
					item.productVoList && item.productVoList.forEach((productItem) => {
						productItem.goodsList.forEach((element) => {
							element.key = Object.keys(element)[0]
							element.value = element[element.key]
						})
					})
				})

				this.list.push(...res.data)
				uni.hideLoading()
				console.log('订单列表', this.list);
			},

			selectSortTime(item, idx) {
				this.currentSortTime = idx
				if (idx == 7) {
					this.showCalendar = true
				}
				this.isShowSortTime = false
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			// 拨打电话
			callPhone(phoneNumber) {
				// 判断手机是否支持拨打电话功能
				if (uni.canIUse('makePhoneCall')) {
					uni.makePhoneCall({
						phoneNumber: phoneNumber, // 电话号码
						success: function() {
							console.log('拨打电话成功');
						},
						fail: function() {
							console.log('拨打电话失败');
						}
					});
				} else {
					console.log('你的设备不支持拨打电话功能');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contont-box {
		padding: 360rpx 20rpx 0rpx 20rpx;
	}

	.top-box {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 11;
	}

	.tab-item {
		text-align: center;
		position: relative;
	}

	.tab-item-active {
		color: #269dd1;
	}

	.tab-item-active::after {
		position: absolute;
		content: "";
		display: block;
		width: 50rpx;
		height: 10rpx;
		background: #269dd1;
		left: 50%;
		bottom: 0;
		transform: translate(-50%);
	}

	.color-item {
		padding: 10rpx 20rpx;
	}

	.order-item-content {
		background: #F7F7F7;
		border-radius: 6upx;
		padding: 10upx 16upx;
		margin-top: 16upx;
	}


	.order-item-color {
		display: flex;
		align-items: center;
		font-size: 26upx;
	}
</style>